<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>InfoBox自定义信息窗口</title>
<link rel="icon" href="data:,"/>
<script type="text/javascript" src="./assets/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./bmap/map_api_v3.0.js"></script>
<style type="text/css">
html{height:100%}
body{height:100%;margin:0;padding:0}
#container{height:100%}

.infoBoxContent .infoBoxClose {
  position: absolute;
  display: inline-flex;
  width: 16px;
  height: 16px;
  right: 2px;
  cursor: pointer;
  top: -39%;
  background: url('./assets/images/close.png') no-repeat;
  background-size: 100% 100%;
  z-index: 666;
}
.infoBoxContent{
  height: 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  position: absolute;
  transform: translateY(50%);
  width: 100%;
}
.infoBoxContent>div{
  z-index: 999;
  cursor: pointer;
  color: #fff;
}
</style>
</head>

<body>
  <div id="container"></div>
</body>
<script type="text/javascript">
const map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(104.065482, 30.511052), 19);
map.addControl(new BMap.MapTypeControl({
  mapTypes: [
    BMAP_NORMAL_MAP,
    BMAP_HYBRID_MAP
  ]
}));
map.addControl(new BMap.NavigationControl({
  type: BMAP_NAVIGATION_CONTROL_ZOOM,
  anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
}));
map.enableScrollWheelZoom(true);

// “点击某个点弹出信息窗口”示例
const demoInfoHtml =  `
  <div class='infoBoxContent'>
    <span class='infoBoxClose'></span>
    <div class='infoBox'>
      <span>川A.123456</span>
    </div>
  </div>
`;
const demoInfoBox = new BMapLib.InfoBox(map, demoInfoHtml, {
  boxStyle:{
    background: "url('./assets/images/car_no_bg.png') no-repeat center",
    backgroundSize: "100% 100%",
    width: "241px",
    height: "121px",
  },
  enableAutoPan: true,
  // align: 'INFOBOX_AT_TOP',
  closeIconMargin: "4px 2px 0 0",
  closeIconUrl: "./assets/images/close.png",
});
demoInfoBox.addEventListener("open", function(e) {
  $('.infoBoxClose').on('click', function (c) {
    demoInfoBox.hide();
  });
});
const myCarIcon = new BMap.Icon("./assets/images/car1.png", new BMap.Size(60, 36));
myCarIcon.setImageSize(new BMap.Size(60, 36));
const demoMarker = new BMap.Marker(new BMap.Point(104.065482, 30.511052), {
  icon: myCarIcon
});
demoMarker.addEventListener("click",function() {
  demoInfoBox.open(demoMarker);
});
map.addOverlay(demoMarker);
</script>
</html>
